<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.bar.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A combined bar/line chart</title>
    
    <meta name="robots" content="noindex,nofollow" />
    <meta name="description" content="A combined Bar and Line chart" />
    
</head>
<body>
        
    <h1>A combined bar/line chart</h1>
    
    <p>
        
    </p>

    <canvas id="cvs" width="1000" height="350">[No canvas support]</canvas>

    <script>
        $(document).ready(function ()
        {
            /**
            * Create the data and colors
            */
            var barData = [];
            var lineData = [];
            var colors = [];
            for (var i=0; i<60; ++i) {
                if (i < 30) {
                    barData[i] = RGraph.random(-100, 0);
                    colors[i] = '#318CBD';
                } else {
                    barData[i] = RGraph.random(0, 100);
                    colors[i] = '#BD3929';
                }
                
                lineData[i] = (((i/60) * 200) - 100) * RGraph.random(0, 10);
            }

            var bar = new RGraph.Bar({
                id: 'cvs',
                data: barData,
                options: {
                    hmargin: 1,
                    colors: {
                        self: colors,
                        sequential: true
                    },
                    xaxispos: 'center',
                    background: {
                        grid: {
                            autofit: {
                                numhlines: 10
                            }
                        }
                    },
                    ymax: 100,
                    gutter: {
                        bottom: 50
                    },
                    strokestyle: 'rgba(0,0,0,0)',
                    labels: ['1997', '1998','1999','2000','2001','2002','2003','2004','2005','2006','2007','2008','2009','2010','2011']
                }
            })




            /**
            * Now add the line chart
            */
            var line = new RGraph.Line({
                id: 'cvs',
                data: lineData,
                options: {
                    colors: ['#FFD600'],
                    xaxispos: 'center',
                    linewidth: 2,
                    shadow: {
                        offsetx: 0,
                        offsety: 0,
                        blur: 5
                    }
                }
            })
            
            /**
            * Create the combined class
            */
            combo = new RGraph.CombinedChart(bar, line);
            combo.draw();            
        })
    </script>


    <p>
        <a href="./">&laquo; Back</a>
    </p>

</body>
</html>